<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可视化编辑器</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" type="image/ico" href="/pc/inbox_icon.png">
</head>
<body>
<div class="editor">
    <!-- 顶部导航 -->
    <div class="editor-header">
        <div class="logo">EmailCraft</div>
        <div class="actions">
            <button id="importBtn" class="action-btn">导入代码</button>
            <button id="exportBtn" class="action-btn">导出代码</button>
            <!-- 新增发送按钮 -->
            <button id="sendEmailBtn" class="action-btn primary">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="18" height="18">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
                发送邮件
            </button>
        </div>
    </div>

    <!-- 主编辑区域 -->
    <div class="editor-main">
        <!-- 左侧组件面板 -->
        <div class="components-panel">
            <div class="panel-header">组件库</div>
            <div class="components-list">
                <!-- 布局组件 -->
                <div class="component-group">
                    <div class="group-title">布局组件</div>
                    <div class="component-grid">
                        <div class="component-item" draggable="true" data-type="section">
                            <div class="item-icon">
                                <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" rx="2"/><line x1="3" y1="9" x2="21" y2="9" stroke="currentColor" stroke-width="2"/></svg>
                            </div>
                            <span>区域布局</span>
                        </div>
                        <div class="component-item" draggable="true" data-type="columns">
                            <div class="item-icon">
                                <svg viewBox="0 0 24 24"><path d="M3 3h4v18H3zM10 3h4v18h-4zM17 3h4v18h-4z" fill="none" stroke="currentColor" stroke-width="2"/></svg>
                            </div>
                            <span>分栏布局</span>
                        </div>
                    </div>
                </div>

                <!-- 基础组件 -->
                <div class="component-group">
                    <div class="group-title">基础组件</div>
                    <div class="component-grid">
                        <div class="component-item" draggable="true" data-type="heading">
                            <div class="item-icon">
                                <svg viewBox="0 0 24 24"><path d="M4 4v16M20 4v16M4 12h16" stroke="currentColor" stroke-width="2" fill="none"/></svg>
                            </div>
                            <span>标题</span>
                        </div>
                        <div class="component-item" draggable="true" data-type="text">
                            <div class="item-icon">
                                <svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                            </div>
                            <span>文本</span>
                        </div>
                        <div class="component-item" draggable="true" data-type="divider">
                            <div class="item-icon">
                                <svg viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12" stroke="currentColor" stroke-width="2" stroke-dasharray="4 2"/></svg>
                            </div>
                            <span>分割线</span>
                        </div>
                        <div class="component-item" draggable="true" data-type="list">
                            <div class="item-icon">
                                <svg viewBox="0 0 24 24"><circle cx="4" cy="7" r="1" fill="currentColor"/><line x1="8" y1="7" x2="20" y2="7" stroke="currentColor" stroke-width="2"/><circle cx="4" cy="12" r="1" fill="currentColor"/><line x1="8" y1="12" x2="20" y2="12" stroke="currentColor" stroke-width="2"/><circle cx="4" cy="17" r="1" fill="currentColor"/><line x1="8" y1="17" x2="20" y2="17" stroke="currentColor" stroke-width="2"/></svg>
                            </div>
                            <span>列表</span>
                        </div>
                    </div>
                </div>

                <!-- 媒体组件 -->
                <div class="component-group">
                    <div class="group-title">媒体组件</div>
                    <div class="component-grid">
                        <div class="component-item" draggable="true" data-type="image">
                            <div class="item-icon">
                                <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" rx="2"/><circle cx="8.5" cy="8.5" r="1.5" fill="currentColor"/><path d="M21 15l-5-5L5 21" stroke="currentColor" stroke-width="2"/></svg>
                            </div>
                            <span>图片</span>
                        </div>
                        <div class="component-item" draggable="true" data-type="video">
                            <div class="item-icon">
                                <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" rx="2"/><path d="M10 8l6 4-6 4V8z" fill="currentColor"/></svg>
                            </div>
                            <span>视频</span>
                        </div>
                        <div class="component-item" draggable="true" data-type="icon">
                            <div class="item-icon">
                                <svg viewBox="0 0 24 24"><path d="M12 2l2.4 7.4h7.6l-6 4.6 2.4 7.4-6-4.6-6 4.6 2.4-7.4-6-4.6h7.6z" fill="none" stroke="currentColor" stroke-width="2"/></svg>
                            </div>
                            <span>图标</span>
                        </div>
                    </div>
                </div>

                <!-- 交互组件 -->
                <div class="component-group">
                    <div class="group-title">交互组件</div>
                    <div class="component-grid">
                        <div class="component-item" draggable="true" data-type="button">
                            <div class="item-icon">
                                <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" fill="none" stroke="currentColor" stroke-width="2" rx="6"/></svg>
                            </div>
                            <span>按钮</span>
                        </div>
                        <div class="component-item" draggable="true" data-type="link">
                            <div class="item-icon">
                                <svg viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" fill="none" stroke="currentColor" stroke-width="2"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" fill="none" stroke="currentColor" stroke-width="2"/></svg>
                            </div>
                            <span>链接</span>
                        </div>
                        <div class="component-item" draggable="true" data-type="card">
                            <div class="item-icon">
                                <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" rx="2"/><line x1="3" y1="9" x2="21" y2="9" stroke="currentColor" stroke-width="2"/><line x1="9" y1="15" x2="15" y2="15" stroke="currentColor" stroke-width="2"/></svg>
                            </div>
                            <span>卡片</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑画布 -->
        <div class="canvas-container">
            <div class="canvas-header">
                <h2>在线网模版编辑工具</h2>
                <p class="subtitle">兼顾代码小白，所见即所得，无需代码经验轻松上手</p>
            </div>
            <div class="canvas" id="canvas-content">
                <!-- 网格背景和参考线 -->
                <div class="grid-lines"></div>
                <!-- 可编辑区域 -->
                <div class="editable-area">
                    <!-- 组件将被放置在这里 -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 发送邮件模态框 -->
<div id="send-modal">
    <div class="send-modal-content">
        <span class="close">&times;</span>
        <h2>发送邮件设置</h2>
        <form id="send-form">
            <div class="form-group">
                <label>发件人邮箱</label>
                <input type="email" id="send-from" required placeholder="your-email@qq.com">
            </div>
            <div class="form-group">
                <label>SMTP授权码</label>
                <input type="password" id="send-password" required placeholder="16位授权码">
            </div>
            <div class="form-group">
                <label>收件人邮箱</label>
                <input type="email" id="send-to" required placeholder="recipient@example.com">
            </div>
            <div class="form-group">
                <label>邮件主题</label>
                <input type="text" id="send-subject" required placeholder="请输入邮件主题">
            </div>
            <div class="form-group">
                <label>添加附件</label>
                <div class="file-upload">
                    <input type="file" id="attachment" multiple
                           accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.png,.zip">
                    <div class="custom-file-input">
                        <svg viewBox="0 0 24 24" width="24" height="24">
                            <path fill="currentColor" d="M14,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8L14,2z M13,9V3.5L18.5,9H13z M16,19h-3v2h-2v-2H8v-2h3v-2h2v2h3V19z"/>
                        </svg>
                        <span>点击选择文件</span>
                    </div>
                    <div class="file-info">未选择任何文件</div>
                </div>
                <small class="hint">支持多选文件(按住Ctrl/Command键选择多个文件)，单个不超过10MB</small>
            </div>
            <div class="form-buttons">
                <button type="submit" class="button button-primary">立即发送</button>
                <button type="button" id="cancel-send" class="button button-secondary">取消</button>
            </div>
        </form>
    </div>
</div>
<script src="script.js"></script>
</body>
</html>